<template>
  <div>
    <baidu-map ref="map" :center="center" :zoom="zoom" @ready="handler" style="height: 100vh; z-index: -9999" @click="getClickInfo" :scroll-wheel-zoom='true' ak="bpGUuZZiSZGY9pOlOaStSFkkXE2B9R7C">
    </baidu-map>
  </div>
</template>
<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import { styleJson } from "./map-style";
export default {
  name: "wh-map",
  data() {
    return {
      zoom: 5,
      BMap: {},
      map: {}
    };
  },
  props: {
    center: { lng: 109.45744048529967, lat: 36.49771311230842 }
  },
  components: {
    BaiduMap
  },
  watch: {
    center() {
      let _ = this
      _.setCenter(_.center)
    }
  },
  methods: {
    setCenter(center) {
      var mk = new this.BMap.Marker(center);
      this.map.addOverlay(mk);
      this.map.panTo(center);
      this.zoom = 15
    },
    handler({ BMap, map }) {
      let _ = this
      var geolocation = new BMap.Geolocation();
      this.BMap = BMap
      this.map = map
      geolocation.getCurrentPosition(
        function(r) {
          if (this.getStatus() == 0) {
            map.centerAndZoom(r.point, 15)
            _.setCenter(r.point)
          } else {
            alert("failed" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
      map.setMapStyle({
        styleJson: styleJson
      });
    },
    getClickInfo(e) {
      this.$emit('click',e)
    }
  }
};
</script>
